<template>
    <div class="wapper ppt">
                <el-card class="card" shadow="never" :body-style="{ padding: '20px' }">
                    <template #header>
                        <i class="el-icon-s-grid mr10"></i>
                        <span>升级扩容</span>
                    </template>
                    
                    <div class="progress_my">
                        <div class="label">我的空间</div>
                        <el-progress id="progress" :text-inside="true" :stroke-width="26" :percentage="percent" />
                        <div class="des">
                            {{ getMB(spaceInfo.usedSpace) }}MB/{{ getMB(spaceInfo.maxSpace) }}MB
                        </div>
                    </div>
                    <el-radio-group v-model="radio"  class="packages">
                        <el-col  :span="24 / (space_package.length || 1)" class="package" v-for="(item,index) in space_package" :key="index">
                            
                                <div @click="itemClick(item,index)" class="package-box">
                                    <div class="package-radio">
                                        <el-radio :label="item.val">
                                            <div class="label">{{item.label}}</div>
                                        </el-radio>
                                    </div>
                                    <div class="des">包含{{item.value.split(',')[1]}}MB空间</div>
                                    <div class="des">单价{{item.value.split(',')[2]}}元/MB</div>
                                </div>
                        </el-col>
                    </el-radio-group>
                    <el-button class="btn-bottom" type="primary" size="default" @click="submit">提交</el-button>
                    
                </el-card>
    </div>
</template>

<script>
import { getTenantSpaceVo, editMaxspace , updateUserSpace } from '@/api/system/space'
import modelMixin from '@/mixins/modelMixin'
import useUserStore from '@/store/modules/user'
const userStore = useUserStore()
    export default {
        mixins: [modelMixin],
        data() {
            return {
                space_package: [],
                radio: '',
                spaceInfo: {},
                percent: 0
            }
        },
        created() {
            this.getTenantSpaceVo()
            this.getDicts(['space_package']).then(res => {
                this.space_package = this.space_package.map(item => {
                    return {
                        label: item.label,
                        value: item.value,
                        checked: false,
                        val:item.value.split(',')[0]
                    }
                })
            })
        },
        methods: {
            itemClick(item,index) {
                this.radio = item.val
                
                this.$forceUpdate()
            },
            getTenantSpaceVo() {
                getTenantSpaceVo().then(res => {
                    this.spaceInfo = res.data
                    this.percent = ((this.spaceInfo.usedSpace / this.spaceInfo.maxSpace) * 100).toFixed(2)
                })
            },
            getMB(val) {
                return (val / 1024 / 1024).toFixed(0) || 0
            },  
            submit() {
                this.$modal.confirm('确定要升级吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let params = {
                        id:this.spaceInfo.id,
                        maxSpace: this.spaceInfo.maxSpace + this.radio * 1024 * 1024,
                    }
                    editMaxspace(params).then(res => {
                        this.$modal.msgSuccess('升级成功')
                        this.getTenantSpaceVo()
                    })
                }).catch(() => {
                    this.$modal.msgError('已取消升级');
                });
            }
        },
    }
</script>

<style lang="scss" scoped>
.wapper{
    .packages {
        display: flex;
        align-items: center;
        justify-content: space-around;
        margin-top: 100px;
        font-size: 14px;
        cursor: pointer;
        .package{
            .package-box{
                border: 1px solid #ebeef5;
                padding: 40px;
                border-radius:18px;
                .des{
                    margin-top: 10px;
                    color: #606266;
                }
            }

            .package-radio{
                display: flex;
                align-items: center;
                margin:0!important;
                .label{
                    font-size: 16px;
                    color: #303133;
                }
            }
        }
    }

}
.card{
    max-width: 1200px;
    margin: 50px auto;
    padding-bottom: 40px;
}
.btn-bottom{
    margin-top: 50px;
    padding:10px 40px;
    float: right;
}
.progress_my{
    margin-bottom: 20px;
    width: 300px;
    .label{
        font-size: 14px;
        color: #303133;
        margin-bottom: 10px;
    }
    .des{
        font-size: 14px;
        color: #606266;
        margin-top: 4px;
    }
}
</style>
<style type="text/css">
    .package-radio .el-radio {
        margin: 0;
    }
    .ppt .el-card__header {
    background-color: #f5f7fa;
}
</style>